<template>
    <view class="box">
        <view v-for="item, index in props.data" :key="index" class="item">
            <image v-if="item.img && item.img[0] && item.img[0].path2" :src="item.img[0].path2" mode="scaleToFill"
                class="thumb" />
            <view class="bottom">
                <view class="ellipsis-2">{{ item.title }}</view>
                <view class="price">
                    <text>￥{{ item.price }}</text>
                    <s>￥{{ item.original_price }}</s>
                </view>
                <view class="more">
                    <view>已售 {{ item.sales_volume }}</view>
                    <view>进店<wd-icon name="arrow-right" size="24rpx" color="#999" /></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
const props = defineProps({
    data: { default: [] }
})


</script>

<style scoped>
.box {
    display: flex;
    flex-wrap: wrap;
}

.thumb {
    width: 100%;
    height: 348rpx;
}

.price text {
    font-size: 32rpx;
    font-weight: bold;
    color: red;
}

.price s {
    font-size: 28rpx;
    font-weight: normal;
    color: #999;
}

.more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24rpx;
    color: #666;
}

.bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 200rpx;
    padding: 16rpx 20rpx;
    font-size: 28rpx;
}

.item {
    width: 49%;
    margin-right: 2%;
    margin-bottom: 20rpx;
    overflow: hidden;
    background: white;
    border-radius: 12rpx;
}

.item:nth-child(2n) {
    margin-right: 0;
}
</style>